<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>展华科技产品代理商管理系统</title>
  <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
  <!-- Bootstrap 3.3.2 -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <!-- FontAwesome 4.3.0 -->
  <link href="plugins/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <!-- Theme style -->
  <link href="css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link href="css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
  <!-- Date Picker -->
  <link href="plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
  <!-- Daterange picker -->
  <link href="plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
  <!-- bootstrap wysihtml5 - text editor -->
  <link href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
  <!-- bootstrap checkbox -->
  <link href="plugins/bootstrap-checkbox/css/bootstrap-checkbox.css" rel="stylesheet" type="text/css" />
  <link href="css/app.css" rel="stylesheet" />
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="http://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="http://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
<script src="plugins/jQuery/jQuery-2.1.3.min.js"></script>
<script src="js/diandongche.js" type="text/javascript"></script>
<script src="plugins/moment/moment.js" type="text/javascript"></script>
</head>
<body class="skin-blue" >
<div class="wrapper">
  <header class="main-header">
    <!-- Logo -->
    <a href="/" class="logo">展华代理商管理系统</a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top" role="navigation">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">切换侧边栏</span>
      </a>
      
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
  <!-- sidebar: style can be found in sidebar.less -->
  <section class="sidebar">
    <!-- sidebar menu: : style can be found in sidebar.less -->
    <ul class="sidebar-menu" id="sidebar-menu">
      
    </ul>
    <script>
        ddche.leftNav();
    </script>
  </section>
  <!-- /.sidebar -->
</aside>
    <!--********************************************************************************************** -->
    <script src="laydate/laydate.js"></script>
   <script src="http://webapi.amap.com/maps?v=1.3&key=0afc3f65734f6ace208e0fd51b6b16a7" type="text/javascript"></script>
    <script src="js/car-gps.js"></script>
<aside class="right-side">
    <section class="content-header">
    <div class="box box-success">
          <div class="box-header">
            <h3 class="box-title">GPS数据</h3>
          </div>
          <div class="box-body">
            <div class="box-body">
        <form class="form-inline" data-parsley-validate id="carGps">
          <input type="hidden" name="imei" value="" />
           <div class="form-group">
            <label>开始日期时间</label>
            <input type="text" class="form-control" style="width: 200px;" name="beginTime" onclick="laydate({format:'YYYY-MM-DD hh:mm:ss'})" >
          </div>
           <div class="form-group">
            <label>结束日期时间</label>
            <input type="text" class="form-control" style="width: 200px;" name="endTime" onclick="laydate({format:'YYYY-MM-DD hh:mm:ss'})">
          </div>
          <button type="submit" class="btn btn-primary" id="deviceGps">查询</button>
        </form>
      
            <table class="table table-bordered">
              <thead>
                <tr>
                    <th>GPS上报时间</th>
                    <th>GPS定位状态</th>
                    <th>速度</th>
                    <th>车辆状态</th>
                    <th>位置描述</th>
                    <th>操作</th>
                </tr>
              </thead>
                <tbody id="cont">
                <tr rel="{id}">
                    <td>{name}</td>
                    <td>{name}</td>
                    <td>{name}</td>
                    <td>{name}</td>
                    <td>{linkman}</td>
                    <td><a href="javascript:"  class="deviceModal" lng="120.123123" lat="38.21312" rel="map">查看位置</a></td>
                </tr>
                </tbody>
            </table>
            <table style="display:none;">
                <tbody id="car-temp">
                  <tr rel="{id}">
                      <td>{name}</td>
                      <td>{linkman}</td>
                     
                      <td><a href="javascript:"  class="deviceModal" lng="120.123123" lat="38.21312" rel="map">查看位置</a></td>
                      
                  </tr>
                </tbody>
            </table>
        </div>
        <div class="box-footer clearfix">
            <ul class="pagination pagination-sm no-margin pull-right" id="page">

            </ul>
        </div>
    
  </div>
    </section>
  </aside>
    <!--********************************************************************************************** -->

</div><!-- /.content -->
</div><!-- /.content-wrapper -->
<footer class="main-footer">
  <div class="pull-right hidden-xs">
    <b>电话：0755-82049709&nbsp;&nbsp;邮箱：zhanhuakj@foxmail.com&nbsp;&nbsp;深圳市车公庙天安数码时代大厦A座2207-2208号</b>
  </div>
  <strong>Copyright &copy; 2014-2025 <a href="#">深圳市展华科技有限公司</a>.</strong>
</footer>
</div><!-- ./wrapper -->


<div class="modal fade modal_alert" tabindex="-1" role="dialog" data-toggle="modal" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary modal-confirm" data-dismiss="modal">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal modal_map" tabindex="-1" role="dialog" data-toggle="modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">位置</h4>
            </div>
            <div class="modal-body" style="overflow:hidden;">
                  <div id="container" style="height:300px;width:100%;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!-- jQuery 2.1.3 -->
<!-- parsley.js -->
<script>
window.ParsleyConfig = {
  errorsWrapper: '<span class="parsley-error"></span>',
  errorTemplate: '<span></span>'
};

var imei=ddche.GetQueryString("imei");
var beginTime=decodeURIComponent(ddche.GetQueryString("beginTime"))||(moment(new Date()).format("YYYY-MM-DD")+" 00:00:00");
var endTime=decodeURIComponent(ddche.GetQueryString("endTime"))||moment().format("YYYY-MM-DD hh:mm:ss");
$("[name='imei']").val(imei);
$("[name='beginTime']").val(beginTime);
  $("[name='endTime']").val(endTime);
$.ajax({
  type:"get",
  url:"/api/device/track/"+imei,
  data:{
      beginTime:beginTime,
      endTime:endTime,
  },
  dataType:"json"
}).done(function(data){
    if(data.code==0){
      if(data.result<1)return;
          var html=ddche.stringReplace_com(data.result.data,"car-temp");
          $("#cont").html(html);
          var total=data.result.pagination.rows;
          var per=data.result.pagination.rpp;
          var pageCount=Math.ceil(total/per);
          var pageHtml='<li><a href="'+location.pathname+'?page=1">&laquo;</a></li>';
          var numpage=0;//起始页数
          var perPage=Math.ceil(size/2);//中间页数
               if(page>perPage){
                  if((pageCount-page)<(size-perPage)){
                      numpage=pageCount-size+1;
                  }else{
                      numpage=page-size+perPage;
                  }
                }else{
                  numpage=1
                }
            for(var i=0;i<size;i++){

               if((numpage+i)==page){
                pageHtml+='<li class="active"><a href="'+location.pathname+'?page='+(i+numpage)+'&'+search+'">'+(i+numpage)+'</a></li>';
                continue;
               }
                pageHtml+='<li><a href="'+location.pathname+'?page='+(i+numpage)+'&'+search+'">'+(i+numpage)+'</a></li>';
            }
          
          pageHtml+='<li><a href="'+location.pathname+'?page='+pageCount+'">&raquo;</a></li>'+
                    ' <div class="pageJump">'+
                    '<input type="number">'+
                    '<label  data-total="'+pageCount+'">跳转</label>'+
                    '</div>'
          ;


                if(pageCount>1) {
                    $("#page").html(pageHtml);
                }
                //翻页
                $(".pageJump label").click(function(){
                    var page=parseInt($(this).closest(".pageJump").find("input").val());
                    if(page){
                        if(page<=parseInt($(this).attr("data-total"))){
                             location.href=$(".pagination li").eq(0).find("a").attr("href").replace("1",page);
                        }else{
                            alert("超出最大页数!");
                        }
                    }
                });
                $(".pageJump input").change(function(){
                   if($(this).val()<0){
                    $(this).val(0);
                   }
                });
        }else{
          alert(data.msg);
        }
});

$("#deviceGps").click(function(e){
  e.preventDefault();
  if($("[name='beginTime']").val().replace(/-/g,"").replace(/:/g,"").replace(" ","")>
    $("[name='endTime']").val().replace(/-/g,"").replace(/:/g,"").replace(" ","")){
    $(".modal_alert").modal().find(".modal-body").html("开始时间必须小于结束时间");
  }
  //$("[name='beginTime']").val(encodeURI($("[name='beginTime']").val()));
  //$("[name='endTime']").val(encodeURI($("[name='endTime']").val()));
  console.log($("#carGps").serialize());
 
  location.href="car-device-gps.html?"+decodeURI($("#carGps").serialize().replace(/\+/g," "));
    return;
});
</script>
<script src="plugins/bower_components/parsleyjs/dist/parsley.js"></script>
<script src="plugins/bower_components/parsleyjs/src/i18n/zh_cn.js"></script>
<!-- jQuery UI 1.11.2 -->
<script src="plugins/jQueryUI/jquery-ui.min.js" type="text/javascript"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.2 JS -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Bootstrap-Checkbox -->
<script src="plugins/bootstrap-checkbox/js/bootstrap-checkbox.js" type="text/javascript"></script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<!-- daterangepicker -->
<script src="plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- FastClick -->
<script src='plugins/fastclick/fastclick.min.js'></script>
<!-- Momentjs-->
<script src='plugins/moment/moment.js'></script>
<!-- Jquery serializeJson-->
<script src="plugins/serialize-object/jquery.serialize-object.min.js"></script>
<!-- AdminLTE App -->
<script src="js/app.min.js" type="text/javascript"></script>
</body>
</html>